<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix card-title">
        <span>商家审核</span>
      </div>
      <el-row>
        <el-col :span="5">
          <el-card class="bg-info card-item">
            <p class="card-text"><i class="el-icon-info"></i>  待审核</p>
            <p class="card-text-lg">{{stZero}}</p>
          </el-card>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-card class="bg-success card-item">
            <p class="card-text"><i class="el-icon-success"></i>  已通过</p>
            <p class="card-text-lg">{{stOne}}</p>
          </el-card>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-card class="bg-warning card-item">
            <p class="card-text"><i class="el-icon-warning"></i>  已驳回</p>
            <p class="card-text-lg">{{stTwo}}</p>
          </el-card>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-card class="bg-danger card-item">
            <p class="card-text"><i class="el-icon-error"></i>  已拉黑</p>
            <p class="card-text-lg">{{stThree}}</p>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix card-title">
        <span>广告审核</span>
      </div>
      <el-row>
        <el-col :span="5">
          <el-card class="bg-info card-item">
            <p class="card-text"><i class="el-icon-info"></i>  待审核</p>
            <p class="card-text-lg">{{adZero}}</p>
          </el-card>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-card class="bg-success card-item">
            <p class="card-text"><i class="el-icon-success"></i>  已通过</p>
            <p class="card-text-lg">{{adOne}}</p>
          </el-card>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-card class="bg-warning card-item">
            <p class="card-text"><i class="el-icon-error"></i>  已拒绝</p>
            <p class="card-text-lg">{{adTwo}}</p>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix card-title">
        <span>投诉审核</span>
      </div>
      <el-row>
        <el-col :span="5">
          <el-card class="bg-info card-item">
            <p class="card-text"><i class="el-icon-info"></i>  待审核</p>
            <p class="card-text-lg">{{cpZero}}</p>
          </el-card>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-card class="bg-success card-item">
            <p class="card-text"><i class="el-icon-success"></i>  已审核</p>
            <p class="card-text-lg">{{cpOne}}</p>
          </el-card>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-card class="bg-danger card-item">
            <p class="card-text"><i class="el-icon-error"></i>  已屏蔽</p>
            <p class="card-text-lg">{{cpTwo}}</p>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AdministratorCountContainer',
  data () {
    return {
      stZero: 0,
      stOne: 0,
      stTwo: 0,
      stThree: 0,
      adZero: 0,
      adOne: 0,
      adTwo: 0,
      cpZero: 0,
      cpOne: 0,
      cpTwo: 0
    }
  },
  created () {
    this.initStoresCount()
    this.initAdsCount()
    this.initComplainsCount()
  },
  methods: {
    initStoresCount () {
      this.$administratorAPI.get_stores_count().then((params) => {
        // this.$alert(params.data)
        this.stZero = params.data['0']
        this.stOne = params.data['1']
        this.stTwo = params.data['2']
        this.stThree = params.data['3']
      }).catch((params) => {
        this.$alert(params.message)
      })
    },
    initAdsCount () {
      this.$administratorAPI.get_ads_count().then((params) => {
        // this.$alert(params.data)
        this.adZero = params.data['0']
        this.adOne = params.data['1']
        this.adTwo = params.data['2']
      }).catch((params) => {
        this.$alert(params.message)
      })
    },
    initComplainsCount () {
      this.$administratorAPI.get_complains_count().then((params) => {
        // this.$alert(params.data)
        this.cpZero = params.data['0']
        this.cpOne = params.data['1']
        this.cpTwo = params.data['2']
      }).catch((params) => {
        this.$alert(params.message)
      })
    }
  }
}
</script>

<style scoped>
  .card-container {
    width: 72%;
    margin-left: 11%;
    margin-bottom: 20px;
    padding: 30px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    width: 72%;
    margin-left: 11%;
    margin-bottom: 30px;
    padding: 10px 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
  }
  .card-item{
    text-align: center;
    border: 3px solid #fff;
    padding: 8px 8px;
    margin: 10px 5px;
    border-radius: 7px;
    color: #fff;
    position: relative;
    top: 0px;
    cursor: pointer;
    transition: all 0.6s;
  }
  .card-item:hover{
    top: -15px;
    transform: scale(1.3);
  }
  .bg-success{
    background: #67C23A;
  }
  .bg-warning{
    background: #E6A23C;
  }
  .bg-danger{
    background: #F56C6C;
  }
  .bg-info{
    background: #409EFF;
  }
  .card-title{
    font-size: 25px;
    margin-bottom: 10px;
  }
  .card-text{
    font-size: 23px;
  }
  .card-text-lg{
    font-size: 35px;
  }
</style>
